<!DocType html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.js"></script>

    <!--    智能机器人及网络-->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../CSS/vue.css"/>

</head>
<body>

<div id="app">
    {{ message }}
</div>



<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>


<!--v-bind写法-->
<!-- 完整语法 -->
<!--<a v-bind:href="url">...</a>-->

<!-- 缩写 -->
<!--<a :href="url">...</a>-->

<!-- 动态参数的缩写 (2.6.0+) &ndash;&gt;-->
<!--<a :[key]="url"> ... </a>-->

<!--v-on 写法-->
<!-- 完整语法 -->
<!--<a v-on:click="doSomething">...</a>-->

<!-- 缩写 -->
<!--<a @click="doSomething">...</a>-->

<!-- 动态参数的缩写 (2.6.0+) -->
<!--<a @[event]="doSomething"> ... </a>-->

<div id="app-3">
    <p v-if="seen1">message:{{message}}</p>

<!--    计算属性-->
    <p>Using mustaches: {{ rawHtml.split('').reverse().join('') }}</p>
    <p>message computed property: {{ reversedMessage }}</p>

    <p>Using v-html directive: <span v-html="rawHtml"></span></p>

<!--    直接值或js表达式均可-->
<!--    <button v-bind:disabled="isButtonDisabled">ButtonDiable</button>-->
    <button v-bind:disabled="isButtonDisabled ? true : false">ButtonDiable</button>

    <!--    多个属性绑定空格即可-->
    <button v-on:click="click" v-bind:disabled="isButtonDisabled">mulButton</button>

<!--事件名 属性设置，可动态修改-->
    <button v-on:[eventname]="click" >dynamic event</button>


    <!--    绑定标签的class或id-->
<!--    <button v-bind:id=""-->
    <!--    <button v-bind:class=""></button>-->
</div>

<div id="demo">
    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">

<!--    下面4个均可-->
<!--    <button v-on:click="message = 'click change message'">btn</button>-->
<!--    <button v-on:click="changeMessage">btnFun</button>-->
    <button v-on:click="changeMessage()">btnFun</button>
<!--    <button v-on:click="changeMessage($event)">btnFun</button>-->

</div>

<div id="app-7">
    <ol>
        <!--
          现在我们为每个 todo-item 提供 todo 对象
          todo 对象是变量，即其内容可以是动态的。
          我们也需要为每个组件提供一个“key”，稍后再
          作详细解释。
        -->
        <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id"
        ></todo-item>
    </ol>
</div>


<!--计算属性-->
<div id="app-8">

<p>fullname:{{fullName}}</p>

</div>

<!--侦听器-->
<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{ answer }}</p>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })

    let app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
    let app3 = new Vue({
        el: '#app-3',
        data: {
            seen1: true,
            message: "content123",
            rawHtml:"rawHtml content",
            isButtonDisabled:false,
            eventname:"click"
            // eventname:"dblclick"

        },
        methods: {
          click:function () {

              alert("click");
          }
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        }
    })

    let store = new Vuex.Store({
        state: {count:0},
        mutations: {
            increment (state){
                state.count++
            }
        },
        actions: {},
        modules: {}
    })

    let app4 = new Vue({
        el: '#demo',
        data: {
            show: true
        },
        store:store
    })
    app4.$el.style.background = "#D0D0D0";
    // app4.$el.css("background-color", "yellow")

    if (app4.$el === document.getElementById("demo")) {
        console.log("vue el === getElementbyID");
    }

    let app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            changeMessage: function (event) {
                this.message = "changeMessage function";
            }
        }
    })

    app6.$data.message = "hello vue! 123";

    app6.$watch('message',function (newvalue,oldvalue) {

        console.log("newvalue:" + newvalue);
        console.log("oldvalue:" + oldvalue);
    })

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    let app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                {id: 1, text: '蔬菜'},
                {id: 0, text: '奶酪'},
                {id: 2, text: '随便其它什么人吃的东西'}
            ]
        },
        beforeCreate:function()
        {
            console.log("app7 beforeCreate");
        },
        beforeMount:function()
        {
            console.log("app7 beforeMount");
        },
        mounted:function()
        {
            console.log("app7 Mounted");
        },
        created: function () {
            console.log("app7 created");
        },
        destroyed:function () {
            console.log("app7 destoryed");
        }
    })

    app7.groceryList.push({id: 4, text: '动态添加'});
    // app7.groceryList.push()

    // arr.splice(arr.indexOf(ele),length):表示先获取这个数组中这个元素的下标，然后从这个下标开始计算，删除长度为length的元素
    // app7.groceryList.splice(2,1);//从2个元素开始，删除一个元素

    let index = app7.groceryList.indexOf(app7.groceryList[0]);
    app7.groceryList.splice(index, 1);//从index个元素开始，删除一个元素

    let app8 = new Vue({
        el: '#app-8',
        data: {
            firstName: "firstname",
            lastName: "lastname",
        },
        methods: {

        },
        computed: {
            fullName:{
                // getter
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                // setter
                set: function (newValue) {
                    let names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    })

    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: 'I cannot give you an answer until you ask a question!'
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question: function (newQuestion, oldQuestion) {
                this.answer = 'Waiting for you to stop typing...'
                this.debouncedGetAnswer()
            }
        },
        created: function () {
            // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
            // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
            // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
            // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
            // 请参考：https://lodash.com/docs#debounce
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
        },
        methods: {
            getAnswer: function () {
                if (this.question.indexOf('?') === -1) {
                    this.answer = 'Questions usually contain a question mark. ;-)'
                    return
                }
                this.answer = 'Thinking...'
                var vm = this

//                 Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。
// axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范

                axios.get('https://yesno.wtf/api')
                    .then(function (response) {
                        vm.answer = _.capitalize(response.data.answer);
                        let res = response.data;
                        console.log(res);
                        // let jsonObj = JSON.parse(res);
                        console.log(res.answer+" "+res.forced + " "+res.image);
                    })
                    .catch(function (error) {
                        vm.answer = 'Error! Could not reach the API. ' + error
                    })
            }
        }
    })
</script>

</body>
</html>